<script setup>
import year from '@/views/Visualization/components/year.vue'
import month from '@/views/Visualization/components/month.vue'
import links from '@/views/Visualization/components/links.vue'
import number from '@/views/Visualization/components/number.vue'
import ZheMap from '@/views/Visualization/components/map.vue'
import badProduct from '@/views/Visualization/components/badProduct.vue'
import factory from '@/views/Visualization/components/factory.vue'
import enterprise from '@/views/Visualization/components/enterprise.vue'
import bottom from './components/bottom.vue'
import { getHomeData } from '@/api/home'
import { onMounted, ref } from 'vue'

// import anime from 'animejs';
// import { useRouter } from 'vue-router'
const homeData = ref({})
const timerId = ref({})


onMounted(() => {
    // playAnimation()
    getHomeAPI()
    timerId.value = setInterval(() => {
        // window.location.reload();
    }, 1000)
})
// 获取首页数据
const getHomeAPI = async () => {
    const result = await getHomeData()
    homeData.value = result
}
const factoryOne = ref(null)
const factoryTwo = ref(null)
// function playAnimation() {
//       anime({
//         targets: '.wrapper',
//         translateX: 250,
//         rotate: '1turn',
//         backgroundColor: '#FFF',
//         duration: 2000

//       });
//     }
function goFactoryOne() {
    window.open('http://sso.linkhand.com/screen/nb_gongzhen_center?user=nb_gongzhen&sign=72PQclQPAuG5BLTJ') // 在 click 事件中使用 window.open 进行网页链接跳转
}
function goFactoryTwo() {
    // router.push('/factoryOne')
    console.log(222);
    window.open('http://sso.linkhand.com/screen/nb_jiana_center?user=nb_jiana&sign=72PQclQPAuG5BLTJ') // 在 click 事件中使用 window.open 进行网页链接跳转
}
</script>

<template>
    <div id="main">
        <!-- 平台图片 -->
        <img src="@/assets/图层 1173@3x.png" alt="" class="plate">
        <!-- 中间内容盒子 -->
        <div class="contentBox">
            <div class="production column">
                <!-- 年产量 -->
                <!-- 标题 -->
                <div class="title" id="yearTitle">
                    <div></div>
                </div>
                <div class="year">
                    <year :data="homeData.recentYearlyQtyList"></year>
                </div>
                <!-- 标题 -->
                <div class="title" id="monthTitle">
                    <div></div>
                </div>
                <div class="month">
                    <month :data="homeData.factoryList"></month>
                </div>
                <!-- 标题 -->
                <div class="title" id="linkTitle">
                    <div></div>
                </div>
                <div class="links">
                    <links></links>
                    <number></number>
                </div>
            </div>
            <!-- 数据汇总 -->
            <div class="summary column">
                <img class="back" src="@/assets/中间框加小标题@2x.png" alt="">
                <div class="map">
                    <zhe-map></zhe-map>
                    <!-- <ul class="point">
                        <li>嘉兴市</li>
                        <li>嘉兴市</li>
                        <li>嘉兴市</li>
                        <li>嘉兴市</li>
                        <li>嘉兴市</li>
                        <li>嘉兴市</li>
                        <li>嘉兴市</li>
                        <li>嘉兴市</li>
                        <li>嘉兴市</li>
                        <li>嘉兴市</li>
                    </ul>
                    <ul class="market">
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                    </ul>
                    <ul class="market" id="marketR">
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                        <li>
                            <div class="box"></div>
                            <p>宁波市 32个</p>
                        </li>
                    </ul> -->
                </div>
            </div>
            <!-- 企业数 -->
            <div class="enterprise column">
                <!-- 标题 -->
                <div class="title" id="marketTitle">
                    <div></div>
                </div>
                <!-- <div class="year"> -->
                <enterprise></enterprise>
                <!-- </div> -->
                <!-- 标题 -->
                <div class="title" id="badProductTitle">
                    <div></div>
                </div>
                <div class="badProduct">
                    <badProduct></badProduct>
                </div>
                <!-- 标题 -->
                <div class="title" id="factoryTitle">
                    <div></div>
                </div>
                <div class="factory">
                    <div class="linkBox">
                        <div class="factoryOne" @click="goFactoryOne" ref="factoryOne"></div>
                        <div class="factoryTwo" @click="goFactoryTwo" ref="factoryTwo"></div>
                    </div>
                    <div class="info">
                        <factory></factory>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部数据 -->
        <bottom></bottom>
    </div>
</template>

<style lang="scss">
.title>div {
    // margin-left: 15px;
    // width: 432px;
    height: 55px;
    background-size: cover;
    background-position: left bottom;
    font-size: 18px;
    font-weight: bold;
    color: white;
    font-weight: 700;
    padding-left: 90px;

}

/* 平台图片 */
.plate {
    width: 100%;
    height: 86px;
}

/* 中间内容盒子 */
.contentBox {
    display: flex;
    height: calc(100vh - 200px);
    overflow: hidden;

    .column {
        flex: 2.8;
    }

    .summary.column {
        flex: 4.4;
    }
}

.month {
    margin-left: 10px;
    position: relative;
    padding-top: 5px;
    top: -40px;
    // width: 532px;
    // height: 200px;
}

.links {
    // width: 500px;
    height: 200px;
    display: flex;
    position: relative;
    top: -40px;
}

.factory {
    height: 200px;
    display: flex;
    position: relative;
}

.info {
    width: 300px;
    height: 300px;
    position: relative;
    left: -20px;
    top: 10px;
}

.number {
    width: 300px;
    height: 160px;
    display: flex;
    position: relative;
    top: -40px;
}

.badProduct {
    height: 130px;
    display: flex;
    position: relative;
    top: -40px;
    left: 10px;
}

.badProduct>ul {
    position: relative;
    left: 150px;
    top: -30px;
    padding: 0;
    list-style: none;
}

.badProduct li {
    color: #e8f5fd;
    width: 150px;
    margin-bottom: 10px;

}

.badProduct li::before {
    content: ' ';
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.badProduct li:nth-child(1)::before {
    background-color: #f9b004;
}

.badProduct li:nth-child(2)::before {
    background-color: #1ea1ed;
}

.badProduct li:nth-child(3)::before {
    background-color: #808ec8;
}

.badProduct li:nth-child(4)::before {
    background-color: #ea3c50;
}

.badProduct span {
    display: inline;
    font-size: 16px;
}

.badProduct span:nth-child(1) {
    margin-left: 10px;
}

.badProduct span:nth-child(2) {
    margin-left: 15px;
    color: #198fa9;

}

.factory {
    height: 260px;
    display: flex;
    position: relative;
    top: -40px;
    left: 40px;
}

.factoryOne,
.factoryTwo {
    width: 168px;
    height: 102px;
    background-color: pink;
    border-radius: 3px;
    margin-top: 10px;
    margin-right: 10px;
}

/* 中间数据汇总 */
.summary {
    max-width: 920px;
    max-height: 772px;
    // background-image: url('@/assets/中间框加小标题@2x.png');
    // background-repeat: no-repeat;
    // background-size: cover;
    padding: 0.5rem 0.6rem;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;

    .back {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transform: scale(0.9);

    }
}

.map {
    position: relative;
    width: 100%;
    height: 100%;
}

.point {
    position: relative;
    list-style: none
}

.point>li {
    font-size: 20px;
    color: #efefef;
    font-weight: 700;
    padding-left: 20px;
    width: 100px;
    height: 90px;
    background-image: url('@/assets/黄色打点@2x.png');
    background-repeat: no-repeat;
    position: relative;

}

.point>li:nth-child(1) {
    left: 160px;
    top: 3px;
}

.point>li:nth-child(2) {
    left: 105px;
    top: 44px;
}

.point>li:nth-child(3) {
    left: 7px;
    top: 84px;
}

.point>li:nth-child(4) {
    left: 98px;
    top: 93px;
}

.point>li:nth-child(5) {
    left: 243px;
    top: 22px;
}

.point>li:nth-child(6) {
    left: 338px;
    top: -170px;
}

.point>li:nth-child(7) {
    left: 166px;
    top: -315px;
}

.point>li:nth-child(8) {
    left: 235px;
    top: -502px;
}

.point>li:nth-child(9) {
    left: 270px;
    top: -730px;
}

.point>li:nth-child(10) {
    left: 350px;
    top: -700px;
}

.market {
    width: 200px;
    position: relative;
    list-style: none;
    position: relative;
    top: -493px;
    left: -130px;
}

.market>li {
    color: white;
    font-size: 12px;
    display: flex;
    justify-items: center;
    margin-bottom: 15px;
}

.market>li>.box {
    width: 55px;
    height: 20px;
    border-radius: 3px;
    transform: skew(-30deg);
    /* margin: 50px; */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.market>li>p {
    margin: 0;
    padding-left: 15px;
}

.market>li:nth-child(1)>.box {
    background-color: #ffbe61;
}

.market>li:nth-child(2)>.box {
    background-color: #41ec96;
}

.market>li:nth-child(3)>.box {
    background-color: #4145ec;
}

.market>li:nth-child(4)>.box {
    background-color: #2bceff;
}

.market>li:nth-child(5)>.box {
    background-color: #2bffd5;
}

#marketR {
    left: 505px;
    top: -680px;
}

#marketR>li:nth-child(1)>.box {
    background-color: #ff6161;
}

#marketR>li:nth-child(2)>.box {
    background-color: #ff8a61;
}

#marketR>li:nth-child(3)>.box {
    background-color: #41ec79;
}

#marketR>li:nth-child(4)>.box {
    background-color: #7679f1;
}

#marketR>li:nth-child(5)>.box {
    background-color: #2bffd5;
}

#marketR>li:nth-child(6)>.box {
    background-color: #2bfff8;
}
</style>